<template>
  <div class="app-container">
    <div class="title">计科聊天群</div>
    <div class="message_list">
      <!-- 消息列表 -->
      <ul>
        <template v-for="(item, index) in allMessage" :key="index">
          <li v-if="item.type == 1" class="welcome">
            欢迎 {{ item.person }} 加入当前聊天室
          </li>
          <li v-else-if="item.type == 3" class="message">
            <p class="name_left">{{ item.person }}:&nbsp;&nbsp;</p>
            <p class="message_right">
              {{ item.message }}
            </p>
          </li>
          <li v-else-if="item.type == 2" class="welcome">
            {{ item.person }} 离开了当前聊天室，可能他去打游戏咯~~
          </li>
        </template>

        <!-- <li class="welcome">欢迎 xxx 加入当前聊天室</li>
        <li class="message">
          <p class="name_left">dq:&nbsp;&nbsp;</p>
          <p class="message_right">
            咋说兄弟们咋说兄弟们咋说兄弟们咋说兄弟们咋说兄弟们
          </p>
        </li>
        <li class="welcome">xxx 离开了当前聊天室，可能他去打游戏咯~~</li>
        <li>4</li>
        <li>5</li> -->
      </ul>
    </div>
    <!-- 发送框 -->
    <div class="input-div">
      <textarea
        cols="80"
        rows="5"
        ref="textarea"
        v-model="message.msg"
        placeholder="留下你的金言"
      ></textarea>
      <button class="sendMessage" @click="sendMsg">发送</button>
    </div>

    <!-- 底部 -->
    <TabBar class="taber" />
  </div>
</template>

<script lang='ts'>
// 三方Api webSocket
import SocketService from "@/utils/webSocket";

import { Options, Vue } from "vue-class-component";
import TabBar from "@/components/TabBar.vue";
import { wsMessageType, wsResult } from "@/entity/ws";
import { useStore } from "vuex";
import { all } from "axios";
@Options({
  components: {
    TabBar,
  },
})
export default class spotList extends Vue {
  store = useStore();

  socket = {
    socketService: SocketService.Instance,
  };
  public created(): void {
    SocketService.Instance.connect();
    this.socket.socketService = SocketService.Instance;
  }

  //发送消息
  message: wsMessageType = {};
  allMessage: wsResult[] = [];
  sendMsg(): void {
    this.message.msg;
    this.message.from = localStorage.getItem("ws-name") as string;
    this.socket.socketService.send(this.message);
    // console.log("发送成功");
    this.message.msg = "";
    this.allMessage = this.store.getters["websocket/getAllMessage"];
    // console.log(this.allMessage);
  }
}
</script> 

<style scoped lang='less'>
.app-container {
  .title {
    font-size: 40px;
    font-weight: bold;
    width: 100vw;
    text-align: center;
    color: #408ce2;
  }
  .message_list {
    width: 100%;
    height: calc(100vh - 310px);
    background: #eee;
    padding-top: 15px;
    overflow: auto;
    .welcome {
      width: 95%;
      margin: o auto;
      text-align: center;
      color: #8f8989;
      font-size: 25px;
    }
    .message {
      display: flex;
      // justify-content: space-between;
      font-size: 30px;
      margin: 12px 0 12px 0;
      .name_left {
        font-size: 32px;
        font-weight: bolder;
      }
    }
  }
  .input-div {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    textarea {
      display: block;
      flex: 1;
      padding: 10px;
      resize: none;
    }
    .sendMessage {
      width: 100px;
    }
  }
}
</style>